<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
/*--- 容器 ---*/
.perform { width:100%; height:600px; display:flex; justify-content:center; align-items:center; position:relative;}
.a1 { background-color:#FFF; }
.a2 { background-color:rgb(246,246,246); }
.title { text-align:center; margin-bottom:20px; position:absolute; top:30px;}

/*--- 3D翻牌效果 ----*/
.flip { transform-style:preserve-3d; perspective:800px; webkit-transform:perspective(800px); height:400px; width:300px; position:relative;  }
.container { transform-style:preserve-3d; width:100%; height:100%; position:absolute;  }	
.side { position:absolute;  width:100%; height:100%; text-align:center; line-height:400px;  }
.front { background-color:rgb(255,192,203);  transform:translateZ(100px)}
.back { background-color:rgb(227, 222, 244); transform:rotateY(180deg);}

/*-- 2d转动效果 ---*/
.b { transform-style:preserve-3d; perspective:800; }

/*---- 3d球形效果 ---*/
#ballContainer { height:300px; width:300px; transform-style:preserve-3d; perspective:800px; }
#ballContainer div { width:100%; height:100%; }
#ball { position:relative; transform-style:preserve-3d; }
.circle { position:absolute; border-radius:50%; text-align:center; line-height:300px; border:rgb(255,148,34) 1px solid; color:rgb(255,148,34);}
.ball_1 { }
.ball_2 {  transform:rotateY(45deg) }
.ball_3 {  transform:rotateY(90deg) }
.ball_4 { transform:rotateY(135deg) }

/*--- 3d棱柱效果 ---*/
/*---------- 特别注意，rotate旋转时会将元素的坐标一起旋转，所以设置rotate的顺序十分重要，否则的话就会是另一种效果 ----*/
#pole3D { transform-style:preserve-3d; perspective:800px; height:300px; width:300px; }
#pole3D div { height:100%; width:100%; }
#pole3D-container { transform-style:preserve-3d; position:relative;}
#pole3D-container>div { position:absolute; text-align:center; line-height:300px; border:rgb(255,148,34) 1px solid; }
.font { transform:translateZ(150px) rotateY(0deg);}
.back { transform:translateZ(-150px) rotateY(180deg); }
.left { transform:translateX(-150px) rotateY(-90deg); }
.right { transform:translateX(150px)rotateY(90deg); }
.top { transform: translateY(150px) rotateX(90deg); }
.bottom { transform: translateY(-150px) rotateX(90deg); }
#pole3D-container{ animation:ball 6s infinite linear; }


/*--- 3d图片墙 --*/
#picture-3d { height:200px; width:400px; transform-style:preserve-3d; perspective:1800px; }
#pic-container { position:relative; transform-style:preserve-3d; width:100%; height:100%; text-align:center;}
.pic { position:absolute; border:#999 1px solid; background-color:rgba(246,246,246,0.4); width:200px; height:100px; margin:auto;}
.pic_1 { transform:rotateY(0deg) translateZ(200px)}
.pic_2 { transform:rotateY(60deg) translateZ(200px)}
.pic_3 { transform:rotateY(120deg) translateZ(200px)}
.pic_4 { transform:rotateY(180deg) translateZ(200px)}
.pic_5 { transform:rotateY(240deg) translateZ(200px)}
.pic_6 { transform:rotateY(300deg) translateZ(200px)}
#picture-3d:hover #pic-container { animation:ball 6s infinite linear paused; }


/*-- 动画效果出 --*/
#ball,.b,.container,#pic-container{animation:ball 12s infinite linear; }
@keyframes ball {
	from { transform:rotateY(0deg); }
	to { transform:rotateY(360deg); }
}
</style>
</head>

<body>

<div class="perform a1">
	<div class="title">3d翻牌效果</div>
     <div class="flip">
        <div class="container">
           <div class="side front">
             <p>正面</p>
           </div>
           <div class="side back">
             <p>反面</p>
           </div>
       </div>
     </div>
</div>

<div class="perform a2">
	<div class="title">2d翻牌效果</div>
    <div class="b">
    	<div id="a" style="background-color:#0FF; width:400px; height:400px;"></div>
    </div>
</div>

<div class="perform a1">
	<div class="title">3d球形效果</div>
    <div id="ballContainer">
        <div id="ball"> 
            <div class="circle ball_1">查看更多</div>
            <div class="circle ball_2"></div>
            <div class="circle ball_3"></div>
            <div class="circle ball_4"></div>
        </div>
    </div>
</div>

<div class="perform a2">
	<div class="title">棱柱:rotate会导致元素的参考坐标轴一起发生旋转，所以设置rotate的顺序很重要</div>
    <div id="pole3D">
    	<div id="pole3D-container">
            <div class="font">font</div>
            <div class="back">back</div>
            <div class="left">left</div>
            <div class="right">right</div>
            <div class="top">top</div>
            <div class="bottom">bottom</div>
        </div>
    </div>
</div>

<div class="perform a1">
	<div class="title">3d图片墙</div>
    <div id="picture-3d">
    	<div id="pic-container">
        	<div class="pic pic_1"></div>
            <div class="pic pic_2"></div>
            <div class="pic pic_3"></div>
            <div class="pic pic_4"></div>
            <div class="pic pic_5"></div>
            <div class="pic pic_6"></div>
        </div>
    </div>
</div>

</body>
</html>
  